import { Meta } from '@storybook/addon-docs';

<Meta title="API Reference/Custom Themes" id="api-custom-themes" />

# Defining Your Own Theme

By default RDT comes with a `light` and `dark` theme that can be set on the `theme` property, however, you can create your very own theme using the `createTheme` helper or tweak the existing built in `light` and `dark` themes.

Refer to [themes.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.ts) for properties you can use to create your own color theme.

# Custom Solarized Theme

Let's create a `solarized` theme that inherits from the build in `dark` theme:

```js
import DataTable, { createTheme } from 'react-data-table-component';

// createTheme creates a new theme named solarized that overrides the build in dark theme
createTheme('solarized', {
  text: {
    primary: '#268bd2',
    secondary: '#2aa198',
  },
  background: {
    default: '#002b36',
  },
  context: {
    background: '#cb4b16',
    text: '#FFFFFF',
  },
  divider: {
    default: '#073642',
  },
  action: {
    button: 'rgba(0,0,0,.54)',
    hover: 'rgba(0,0,0,.08)',
    disabled: 'rgba(0,0,0,.12)',
  },
}, 'dark');

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    theme="solarized"
  />
);
```

## Tweaking the built in light and dark themes

You can also take an existing theme and tweak the colors without much effort:

```js
import DataTable, { createTheme } from 'react-data-table-component';

// createTheme creates a new theme named solarized that overrides the build in dark theme
createTheme('dark', {
  background: {
    default: 'transparent',
  },
});

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    theme="solarized"
  />
);
```

Once you've created your theme it will now be available to all DataTables across your project so you may want to define your custom themes in seperate files.
